<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频列表</title>
    <link rel="stylesheet" href="/resources/video/css/jquery.treeview.css" type="text/css" />
    <!--screen.css不要也可以-->
    <link rel="stylesheet" href="/resources/video/css/screen.css" type="text/css" />
    <script src="/common/js/jquery.min.js"></script>
    <!--jquery.cookie.js不要也可以-->
    <script src="/resources/video/js/jquery.cookie.js"></script>
    <script src="/resources/video/js/jquery.treeview.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            //数据
            var file = [{
                id: '',
                pid: '',
                name: '全部文件',
                url: '',
                file: false,
                children: []
            }];
            //初始化数据
            $.ajax({
                url: '/video/list',
                method: 'post',
                async: false,
                data: {},
                dataType: 'json',
                success: function (data) {
                    if (data.success) {
                        file[0].children = data.obj;
                    } else {
                        alert(data.errMsg);
                    }
                }
            });

            /**
             * 生成子一级目录html
             * @param file
             */
            function treeHtml(file) {
                var itemHtmlArr = [];
                //将所有子元素分别转换为html
                file.forEach(function (item, index, array) {
                    var itemHtml = "";
                    if (item.file) {//文件
                        itemHtml = "<li><a href=\"" + item.url + "\" target=\"_blank\"><span class=\"file\">" + item.name + "</span></a></li>"
                    } else {//文件夹
                        itemHtml = "<li><span class=\"folder\">" + item.name + "</span><ul>" + treeHtml(item.children) + "</ul></li>"
                    }
                    itemHtmlArr.push(itemHtml);
                });
                var itemHtmlStrs = "";
                itemHtmlArr.forEach(function (item, index, array) {
                    itemHtmlStrs += item;
                })
                return itemHtmlStrs;
            }

            //初始化
            $("#treeview").html(treeHtml(file));

            //渲染
            $("#treeview").treeview({
                toggle: function () {//文件夹打开关闭切换
                    console.log("%s was toggled.", $(this).find(">span").text());
                }
            });
        });
    </script>
</head>
<body>
<div id="main">
    <ul id="treeview" class="filetree">
    </ul>
</div>
</body>
</html>